Highlighting the Current Section with :target in CSS
The :target pseudo-class in CSS allows you to style an element that matches the current URL fragment identifier (the part after the # symbol). This is especially useful for highlighting the current section in a menu or single-page navigation.
:targetselects the element whose ID matches the fragment in the URL (e.g.,#about).Useful for single-page websites with internal anchor links.
You can apply background color, border, or text effects to the active section.
In this example, when you click on the 'About' link, the URL changes to include #about, and the corresponding section is highlighted with a blue border and light background using the :target pseudo-class.
Use
:targetfor simple client-side navigation or highlighting without JavaScript.Ensure each targetable section has a unique
id.Combine
:targetwith smooth scrolling for a better user experience.Avoid using
:targetfor elements without valididattributes — it won’t work.